로딩 중이에요... 🐣
[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
16 웹소켓 | ✅ 저자: 이유정(박사)
웹소켓(WebSocket)은 서버와 클라이언트 간에 지속적으로 연결을 유지하면서 양방향 통신을 가능하게 하는 통신 프로토콜입니다. 웹소켓은 HTTP처럼 처음엔 요청을 시작하지만, 연결 후에는 끊지 않고 유지하면서 클라이언트와 서버가 양방향·실시간 통신을 할 수 있게 해주는 프로토콜입니다.
1️⃣ [패키지 설치] WebSocket 모듈 설치
pip install websockets
pip install "uvicorn[standard]
pip install --force-reinstall websockets
이 패키지는 FastAPI가 WebSocket을 비동기로 처리하기 위해 필요합니다.
2️⃣ [서버 코드 작성] WebSocket 서버 만들기 :
파일명 예시: websocketsServer.py
from fastapi import FastAPI, WebSocket
from fastapi.responses import HTMLResponse
app = FastAPI()
@app.websocket("/ws") # 클라이언트는 ws://localhost:8000/ws 로 연결
async def websocket_endpoint(websocket: WebSocket):
await websocket.accept() # 클라이언트의 WebSocket 연결 요청을 수락
while True:
# 클라이언트로부터 텍스트 메시지를 기다림 (await → 비동기 처리)
data = await websocket.receive_text()
# 받은 메시지를 다시 클라이언트에게 전송 (Echo 방식)
await websocket.send_text(f"Message text was: {data}")
/ws경로로 클라이언트가 WebSocket 연결 요청- 연결 수락 후, 클라이언트 메시지를 받아서 다시 응답(echo) 전송
[HTML 클라이언트 코드 작성] WebSocket 클라이언트 구현
같은 서버 파일에 HTML 문자열 추가
(websocketsFullCode.py 형태로 작성 가능)
html = """
<!DOCTYPE html>
<html>
<head><title>Chat</title></head>
<body>
<h1>WebSocket Chat</h1>
<form action="" onsubmit="sendMessage(event)">
<input type="text" id="messageText" autocomplete="off"/>
<button>Send</button>
</form>
<ul id='messages'></ul>
<script>
var ws = new WebSocket("ws://localhost:8000/ws");
ws.onmessage = function(event) {
var messages = document.getElementById('messages');
var message = document.createElement('li');
var content = document.createTextNode(event.data);
message.appendChild(content);
messages.appendChild(message);
};
function sendMessage(event) {
var input = document.getElementById("messageText");
ws.send(input.value);
input.value = '';
event.preventDefault();
}
</script>
</body>
</html>
"""
4️⃣ [HTML 렌더링 라우트 추가]
같은 Python 파일 안에 HTML을 반환하는 GET 라우터 추가:
@app.get("/")
async def get():
return HTMLResponse(html)
5️⃣ [전체 서버 코드 완성]
from fastapi import FastAPI, WebSocket
from fastapi.responses import HTMLResponse
app = FastAPI()
html = """ (위의 HTML 코드 그대로) """
@app.get("/")
async def get():
return HTMLResponse(html)
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
await websocket.accept()
while True:
data = await websocket.receive_text()
await websocket.send_text(f"Message text was: {data}")
6️⃣ [서버 실행]
uvicorn websocketsFullCode:app --reload
7️⃣[웹에서 실행 테스트]
http://127.0.0.1:8000/
Python 코드 실행기
